<template >
    <!-- <form action="http://127.0.0.1:8001/goods/upload"
          method="post"
          enctype="multipart/form-data">
          <input name="file" type="file" accept="image/png,image/gif,image/jpeg"/>
          <input type="submit" name="upload"/>
    </form> -->
    <div class="container">
    <div >
        <div>
            <label for="">名称:</label>
           <input type="text" v-model="data.goods_name" placeholder="请输入商品名称">
        </div>
        <div>
            <label for="">标签:</label>   
            <select  v-model="data.goods_tag">
                <option value="内衣">内衣</option>
                <option value="汽车">汽车</option>
                <option value="手机">手机</option>
                <option value="奢侈品">奢侈品</option>
            </select>
        </div>
        <div>
            <label for="">价格:</label>
            <input type="text" v-model="data.goods_price" placeholder="请输入商品价格">           
        </div>
        <div>
            <label for="">库存:</label>
            <input type="text" v-model="data.goods_num" placeholder="请输入商品库存"> 
        </div>
        <div>
            <label for="">商品图片:</label>
            <input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload"/>
        </div>
       <van-button type="primary" @click="createGood">上架商品</van-button>
    </div>
   
    <table border="1" >
        <tr>
            <td>编号</td>
            <td>名称</td>
            <td>标签</td>
            <td>图片</td>
        </tr>
        <tr  v-for="(good, index) in goodList" :key="index">
            <td>{{good.id}}</td>
            <td>{{good.goods_name}}</td>
            <td>{{good.goods_tag}}</td>
            <td><img :src="DOMAIN + good.goods_img" style="width: 200px; height: 200px"></td>
        </tr>
    </table>

    </div>

</template>

<script>
/** 
  *  后台管理view, 管理员用户登录以后在这里面上传商品图片,上架商品,下架商品
 */
import { reactive } from '@vue/reactivity'
import { toRef } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { apiCreateGood, fetchGoodList } from '../api/goods'
import { uploadFile } from '../api/upload'

// 引入组件
import Button from 'vant/es/button';
// 引入组件对应的样式，若组件没有样式文件，则无须引入
import 'vant/es/button/style';
import { DOMAIN } from '../utils/const'

export default {
    components:{
       [Button.name]: Button,
    },
    setup() {
        //商品列表
        const goodList = reactive([])
        //保存新添加的商品
        const data = reactive({
            goods_name:'',
            goods_price: 0,
            goods_num: 0,
            goods_img: '',
            goods_tag: ''
        })

        onMounted(()=>{
            getGoodList()
        })

        /**
         * 获取商品列表
         */
        function getGoodList(){
            fetchGoodList().then(
                (res) => {
                    if(res && res.code == 0){
                       // goodList = res.result.list//错误：直接复制会导致数组响应式丢失,必须用push
                        goodList.splice(0,goodList.length);
                        goodList.push(...res.result.list)//解构 数组里面的元素
                    } else {
                        console.error("get goods list error")
                    }
                }
            )
        }

        /**上传商品图片 */
        function upload(e){
            let file = e.target.files[0];
            console.log(file);
            let param = new FormData(); //创建form对象
            param.append('file',file);//通过append向form对象添加数据
    
            uploadFile(param).then((res)=>{
                const code = res.data.code
                console.log(res.data)
                if(code == 0){
                   data.goods_img = res.data.result.goods_img
                }else {
                   alert(res.data.message)
                }
            })//从返回值里面拿到图片的名字，在下面提交全部商品信息的时候一起post 创建商品接口,
        }

        /** 上架商品 */
        function createGood(){
            apiCreateGood(data).then(
                (res) => {
                    if(code == 0){
                       alert("添加商品成功")
                    }else {
                      alert(res.data.message)
                    }
                }
            )
            getGoodList()
        }
        return {
            data,
          //  ...toRef(goodList),//还没有搞懂什么时候需要 toRef
            goodList,
            upload,
            createGood,
            getGoodList,
            DOMAIN
        }
    },
}
</script>

<style scoped>
.container{
    font-size: 15px;
    text-align:center;
}
</style>
